<template>
	<view class="container">
		<view class="row-container">
		<!-- 商品图片 -->
		<image 
			:src="productCover"
			mode="aspectFill"
			class="product-cover"></image>
		<!-- 商品信息 -->
		<text class="product-info"> 1件{{productName}}</text>
		</view>

		<!-- 商品价格 -->
		<view class = "row-container">
		<text class="order-info-title">订单总价</text>
		<text class="pay-amount">{{productPrice}} 元</text>
		</view>

		<!-- 订单编号 -->
		<view class = "row-container">
		<text class="order-info-title">订单编号</text>
		<text class="order-info-text">{{orderNo}}</text>
		</view>
		
		<!-- 订单创建时间 -->
		<view class = "row-container">
		<text class="order-info-title">下单时间</text>
		<text class="order-info-text">{{createTime}}</text>
		</view>
	
		<!-- 已出货 -->
		<view v-if="outStatus" class="container">
			<text>已完成</text>
		</view>
			
		<view v-else-if ="payStatus" class="container">
			<text class="pay-code">出货码: {{payCode}}</text>
			<button class="delivery-button" @click="onDeliveryButtonClicked()">取货</button>
		</view>

		<view v-else class="container">
			<button class="button">支付</button>
		</view>				
	</view>
	
</template>

<script>
	let tag = "order"
	export default {
		onLoad(para){
			this.$log.info(tag, "onLoad")
			this.$log.info(tag, JSON.stringify(para))
			this.orderNo = para.orderNo
			this.fetchOrderDetail(this.orderNo)
		},
		
		data() {
			return {
				orderNo : "",
				productName : "",
				productCover : "",
				productPrice : "",
				createTime : "",
				payTime : "",	
				outStatus:false,
				payStatus:false,
				payCode: "",
			}
		},
		methods: {
			onDeliveryButtonClicked(){
				this.$log.info(tag, "onDeliveryButtonClicked")
				this.deliverOrder(this.orderNo)
			},
			deliverOrder(orderNo){
				this.$log.info(tag, "deliverOrder")
				uni.request({
					url:`${this.constant.BASE_URL}/api/order/remotePick`,
					method:'GET',
					header:{
						'Authorization' : this.loginManager.getToken()
					},
					data:{
						"orderNo": orderNo
					},
					success: (res) => {
						this.$log.info(tag, "sucess")
						this.$log.info(tag, JSON.stringify(res.data))
					},
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
					}
				})
			},
			
			fetchOrderDetail(orderNo) {
				this.$log.info(tag, `fetchOrderDetail orderNo: ${orderNo}`)
				uni.request({
					url: `${this.constant.BASE_URL}/api/order/${orderNo}`,
					method:'POST',
					header:{
						'Authorization' : this.loginManager.getToken()
					},
					success: (res) => {
						this.$log.info(tag, "success")
						this.$log.info(tag, JSON.stringify(res.data))
						if(res.data.code==200){
							let order=res.data.data
							this.productCover = `${this.constant.BASE_URL}${order.productCover}`
							this.productName = order.productName
							this.productPrice = order.productPrice
							this.createTime = order.createTime
							this.payTime = order.payTime
							this.payCode = order.payCode
							if(order.payStatus=="已支付"){
								this.payStatus =true
							}
							if(order.orderStatus=="已出货"){
								this.outStatus= true
							}
						}
						
					},
					
					
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.row-container {
		width: 90%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 10px;
	}
	
	.product-cover {
		width: 100px;
		height: 100px;
	}
	
	.product-info {
		font-size: 36rpx;
		color: dimgrey;
	}
	
	.order-info-title {
		font-size: 36rpx;
		color: black;
		font-weight: bold;
	}
	
	.order-info-text {
		font-size: 36rpx;
		color: dimgrey;
	}
	
	.pay-amount {
		font-size: 36rpx;
		color: orange;
		font-weight: bold;
	}
	
	.delivery-container {
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20px;
	}
	
	.pay-code {
		font-size: 42rpx;
		color: black;
		font-weight: bold;
	}
	
	.delivery-button {
		width: 100%;
		background-color: #08f;
		color: white;
		font-size: 42rpx;
		font-weight: bold;
		margin-top: 10px;
	}
	
	.delivery-button-hover {
		opacity: 0.5;
	}
</style>

